<template>
  <view class="container">
    <!-- 头部统计信息 -->
    <view class="header">
      <text class="title">家庭账本</text>
      <text class="balance">总支出: {{ totalExpense }}元</text>
    </view>

    <!-- 功能按钮 -->
    <view class="actions">
      <button @click="navigateToAddExpense">记一笔支出</button>
      <button @click="navigateToSettlement">查看债务</button>
    </view>

    <!-- 最近支出列表 -->
    <view class="expense-list">
      <view v-for="item in recentExpenses" :key="item.id" class="expense-item">
        <text>{{ item.payerName }} 支付了 {{ item.amount }}元</text>
        <text>{{ item.createTime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalExpense: 0,
      recentExpenses: [] // 示例数据
    }
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    async loadData() {
      // 从后端API获取数据（实际项目替换为真实接口）
      const res = await uni.request({
        url: 'http://localhost:8080/api/expense/summary',
        method: 'GET',
		data: {
		            ledgerId: 1 // 必须传值
		          }
      });
      this.totalExpense = res.data.data.totalExpense;
      this.recentExpenses = res.data.data.recentExpenses;
    },
    navigateToAddExpense() {
      uni.navigateTo({ url: '/pages/expense/add' });
    },
    navigateToSettlement() {
      uni.navigateTo({ url: '/pages/debt/settlement' });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.header {
  margin-bottom: 30rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}
.balance {
  color: #f56c6c;
}
.actions button {
  margin: 20rpx 0;
  background-color: #409eff;
  color: white;
}
.expense-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
</style>